<template>
    <div class="proposal web-inner">
        <div class="common-title">
            <span class="title-left">合作提案</span>
        </div>
        <div class="form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="title">
                    &bull; STEP1 請選擇您想合作的性質（請至少選一）
                </div>
                <el-form-item label="" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="公益性質" name="type"></el-checkbox>
                        <el-checkbox label="商業性質" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <div class="title">
                    &bull; STEP2 請選擇您想合作的形式（請至少選一）
                </div>
                <el-form-item label="" prop="form">
                    <el-checkbox-group v-model="ruleForm.form">
                        <el-checkbox label="廣告" name="type"></el-checkbox>
                        <el-checkbox label="內容提供" name="type"></el-checkbox>
                        <el-checkbox label="技術合作" name="type"></el-checkbox>
                        <el-checkbox label="活動提案" name="type"></el-checkbox>
                        <el-checkbox label="畢業結盟" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <div class="title">
                    &bull; STEP3
                </div>
                <el-form-item label="公司名稱" prop="company_name">
                    <el-input v-model="ruleForm.company_name"></el-input>
                </el-form-item>
                <el-form-item label="公司簡介" prop="intro">
                    <el-input type="textarea" v-model="ruleForm.intro"></el-input>
                </el-form-item>
                <el-form-item label="聯絡人" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="聯絡電話" prop="tel">
                    <el-input type="number" v-model="ruleForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="行動電話" prop="m_phone">
                    <el-input type="number" v-model="ruleForm.m_phone"></el-input>
                </el-form-item>
                <el-form-item label="總部地址" prop="addr">
                    <el-input  v-model="ruleForm.addr"></el-input>
                </el-form-item>
                <el-form-item label="E-mail" prop="email">
                    <el-input  v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="內容簡介" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="驗證碼" prop="phrase">
                    <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl1" alt="">

                    <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                    <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: "proposal",
    data() {
      var checkPhone = (rule, value, callback) => {
        let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
        if(mobilePatternTW.test(value)){
          callback();
        }else{
          callback(new Error('請輸入正確的電話號碼'));
        }
      };
      var checkEmail=(rule, value, callback) => {
        var temp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(value===""){
          callback(new Error('必填'));
        }
        if(!temp.test(value)){
          callback(new Error('請輸入正確的郵箱'));
        }
        callback();
      };
      return {
        ruleForm:{
          type:[],
          form:[],
          company_name:"",
          intro:"",
          name:"",
          tel:"",
          m_phone:"",
          addr:"",
          email:"",
          desc:"",
          phrase:"",
        },
        rules: {
          type: [
            { required: true, message: '必填', trigger: 'change' },
          ],
          form: [
            { required: true, message: '必填', trigger: 'change' },
          ],
          company_name: [
            { required: true, message: '必填', trigger: 'blur' },
          ],
          intro: [
            { required: true, message: '必填', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '必填', trigger: 'blur' },
          ],
          tel: [
            { required: true, message: '必填', trigger: 'blur' }
          ],
          m_phone: [
            { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
          ],
          addr: [
            { required: true, message: '必填', trigger: 'blur' },
          ],
          email: [
            { required: true,validator:checkEmail, trigger: 'blur' }
          ],
          phrase: [
            { required: true,message: '必填', trigger: 'blur' }
          ],
        },
        imgUrl1:"/webroot/session.php",
      }
    },
    methods:{
      refresh() {
        this.imgUrl1="/webroot/session.php?"+new Date().getTime()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if(valid) {
            this.sendData()
          } else {
            console.log('error submit!!');
          }
        })
      },
      sendData() {
        let data = Object.assign({},this.ruleForm);
        data.type = data.type.join(",");
        data.form = data.form.join(",");
        this.$http({
          method:"post",
          url:this.API.apply_proposal,
          data:qs.stringify(data),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          withCredentials:true
        }).then((res) => {
          this.refresh()
          if(res.data[0].code==="101"){
            this.resetForm("ruleForm");
            this.$alert(this.formTips, '成功', {
              confirmButtonText: '确定',
            });
          }else{
            this.$alert(res.data[1].desc, '提示', {
              confirmButtonText: '确定',
            });
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
</script>

<style scoped lang="less">
    @import "../style/base";
    .proposal{
        margin: 6px auto 0;
        padding: 50px;
        background-color: #ffffff;
        .form{
            .title{
                font-size: 14px;
                margin: 10px 0;
                font-weight: bold;
            }
        }

    }

</style>
<style lang="less">
    .proposal{
        .el-input,.el-textarea{
            width: 300px;
        }
    }
</style>